<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Peaks.js Demo Page</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div id="titles">
      <h1>Peaks.js</h1>
      <p>
        Peaks.js is a JavaScript library that allows you to display and
        interact with audio waveforms in the browser.
      </p>

      <h2>Demo pages</h2>
      <p>
        The following pages demonstrate various configuration options:
      </p>
      <p>
        <a href="/index.html">Precomputed Waveform Data</a> |
        <a href="/webaudio.html">Web Audio API</a> |
        <a href="/zoomable-waveform.html">Single Zoomable Waveform</a> |
        <a href="/overview-waveform.html">Single Fixed Waveform</a> |
        <a href="/cue-events.html">Cue Events</a> |
        <a href="/set-source.html">Changing the Media URL</a> |
        <a href="/multi-channel.html">Multi-Channel Waveform</a> |
        Custom Point and Segment Markers |
        <a href="/overlay-segments.html">Overlay Segments</a> |
        <a href="/external-player.html">External Audio Player</a> |
        <a href="/scrollbar.html">Scrollbar</a>
      </p>
      <h2>Demo: Custom Point and Segment Markers</h2>
      <p>
        This demo shows how to customise the appearance and behavior of point
        and segment markers. The waveforms have a gradient applied to them.
      </p>
    </div>

    <div class="waveform-container">
      <div id="zoomview-container"></div>
    </div>
    <div class="waveform-container">
      <div id="overview-container"></div>
    </div>

    <div id="demo-controls">
      <audio id="audio" controls="controls">
        <source src="/TOL_6min_720p_download.mp3" type="audio/mpeg">
        <source src="/TOL_6min_720p_download.ogg" type='audio/ogg; codecs="vorbis"'>
        Your browser does not support the audio element.
      </audio>

      <div id="controls">
        <div>
          <button data-action="zoom-in">Zoom in</button>
          <button data-action="zoom-out">Zoom out</button>
          <button data-action="add-segment">Add Segment</button>
          <button data-action="add-point">Add Point</button>
          <button data-action="log-data">Log segments/points</button>
          <input type="text" id="seek-time" value="0.0">
          <button data-action="seek">Seek</button>
          <label for="amplitude-scale">Amplitude scale</label>
          <input type="range" id="amplitude-scale" min="0" max="10" step="1">
          <input type="checkbox" id="auto-scroll" checked>
          <label for="auto-scroll">Auto-scroll</label>
        </div>
        <div>
          <input type="checkbox" id="enable-seek" checked>
          <label for="enable-seek">Enable click to seek</label>
          <label for="waveform-drag-mode">Waveform drag mode:</label>
          <select id="waveform-drag-mode">
            <option value="scroll">Scroll</option>
            <option value="insert-segment">Insert segment</option>
          </select>
        </div>
        <div>
          <input type="checkbox" id="enable-segment-dragging">
          <label for="enable-segment-dragging">Enable segment dragging</label>
          <label for="segment-drag-mode">Segment drag mode:</label>
          <select id="segment-drag-mode">
            <option value="overlap">Overlap</option>
            <option value="no-overlap">No overlap</option>
            <option value="compress">Compress</option>
          </select>
        </div>
        <div>
          <button data-action="resize-width">Resize width</button>
          <button data-action="resize-height">Resize height</button>
        </div>
        <div>
          <button data-action="destroy">Destroy</button>
        </div>
      </div>
    </div>

    <div class="log">
      <div id="segments" class="hide">
        <h2>Segments</h2>
        <table>
          <thead>
            <tr>
              <th>ID</th>
              <th>Label</th>
              <th>Start time</th>
              <th>End time</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
          </tbody>
        </table>
      </div>

      <div id="points" class="hide">
        <h2>Points</h2>
        <table>
          <thead>
            <tr>
              <th>ID</th>
              <th>Label</th>
              <th>Time</th>
            </tr>
          </thead>
          <tbody>
          </tbody>
        </table>
      </div>
    </div>

    <script src="/custom-markers/custom-markers.js"></script>
  </body>
</html>
